<template>
  <nav class="navbar">
    <div class="navbar-container">
      <div class="navbar-brand">
        <RouterLink to="/main" class="brand-link">健康档案管理系统</RouterLink>
      </div>
      <ul class="navbar-menu">
        <!-- 首页：仅用户身份显示 -->
        <li v-if="userInfo?.role === '用户'" class="navbar-item">
          <RouterLink to="/main" class="menu-link">首页</RouterLink>
        </li>
        
        <!-- 健康档案：用户和管理员身份显示 -->
        <li v-if="userInfo?.role === '用户' || userInfo?.role === '管理员'" class="navbar-item dropdown">
          <RouterLink to="/md" class="menu-link">健康档案</RouterLink>
          <ul class="dropdown-menu">
            <li><RouterLink to="/basic" class="dropdown-item">健康指标</RouterLink></li>
            <li><RouterLink to="/medication" class="dropdown-item">用药记录</RouterLink></li>
            <li><RouterLink to="/medical-history" class="dropdown-item">既往病史</RouterLink></li>
            <li><RouterLink to="/allergy-history" class="dropdown-item">过敏史</RouterLink></li>
            <li><RouterLink to="/check-up" class="dropdown-item">体检报告</RouterLink></li>
            <li><RouterLink to="/family-history" class="dropdown-item">家族病史</RouterLink></li>
          </ul>
        </li>
        
        <!-- 数据分析：用户和管理员身份显示 -->
        <li v-if="userInfo?.role === '用户' || userInfo?.role === '管理员'" class="navbar-item">
          <RouterLink to="/analysis" class="menu-link">数据分析</RouterLink>
        </li>
        
        <!-- 日志管理：管理员身份显示 -->
        <li v-if="userInfo?.role === '管理员'" class="navbar-item">
          <RouterLink to="/log" class="menu-link">日志管理</RouterLink>
        </li>
        
        <li class="navbar-item dropdown">
          <RouterLink to="/main" class="menu-link">休息一下</RouterLink>
          <ul class="dropdown-menu">
            <li><RouterLink to="/nb" class="dropdown-item">点此有惊喜</RouterLink></li>
            <li><RouterLink to="/bot" class="dropdown-item">系统机器人</RouterLink></li>
            <li><RouterLink to="/fish" class="dropdown-item">大功德木鱼</RouterLink></li>
          </ul>
        </li>
      </ul>
      <div class="user-area">
        <div v-if="userInfo" class="logged-in">
          <span class="welcome-message">欢迎, {{ userInfo.username }}</span>
          <RouterLink to="/user-profile" class="profile-link">个人中心</RouterLink>
          <!-- 仅管理员可见的日志按钮 -->
          <RouterLink 
            v-if="userInfo.role === '管理员'" 
            to="/log" 
            class="auth-link"
          >
            日志管理
          </RouterLink>
        </div>
        <div v-else class="not-logged-in">
          <RouterLink to="/login" class="auth-link">登录</RouterLink>
          <RouterLink to="/register" class="auth-link register-btn">注册</RouterLink>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { RouterLink, useRoute } from 'vue-router';

const route = useRoute();
const userInfo = ref(null);

// 处理用户登出事件
const handleUserLogout = () => {
  userInfo.value = null;
};

// 监听路由变化
watch(() => route.path, (newPath) => {
  if (newPath === '/login') {
    userInfo.value = null;
  } else {
    try {
      const storedUser = localStorage.getItem('currentUser');
      if (storedUser) {
        userInfo.value = JSON.parse(storedUser);
      }
    } catch (error) {
      console.error('获取用户信息失败:', error);
    }
  }
});

onMounted(() => {
  try {
    const storedUser = localStorage.getItem('currentUser');
    // 如果不是登录页面，才读取本地存储
    if (route.path !== '/login' && storedUser) {
      userInfo.value = JSON.parse(storedUser);
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }

  // 监听自定义的用户登出事件
  window.addEventListener('user-logout', handleUserLogout);
  // 监听storage变化事件（处理跨标签页登出情况）
  window.addEventListener('storage', (e) => {
    if (e.key === 'currentUser' && !e.newValue) {
      handleUserLogout();
    }
  });
});

onUnmounted(() => {
  // 移除事件监听
  window.removeEventListener('user-logout', handleUserLogout);
  window.removeEventListener('storage', () => {});
});
</script>

<style scoped>
.navbar {
  background: linear-gradient(135deg, #1a5fb4 0%, #2980b9 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: 700;
}

.brand-link {
  color: white;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.brand-link:hover {
  opacity: 0.9;
}

.navbar-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.5rem;
}

.navbar-item {
  position: relative;

  &.dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 12px 0;
    min-width: 160px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    transform: translateY(-10px);

    .dropdown-item {
      color: #2c3e50;
      padding: 8px 16px;
      transition: all 0.2s ease;

      &:hover {
        background: rgba(41, 128, 185, 0.1);
        color: #2980b9;
      }
    }
  }

}

.menu-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: 8px 0;
  font-weight: 500;
  transition: color 0.3s ease;
  position: relative;
}

.menu-link:hover {
  color: white;
}

.menu-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: white;
  transition: width 0.3s ease;
}

.menu-link:hover::after {
  width: 100%;
}

.user-area {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.welcome-message {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.profile-link {
  color: white;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.2);
  transition: background-color 0.3s ease;
}

.profile-link:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.auth-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  margin-left: 1rem;
}

.auth-link:hover {
  color: white;
}

.register-btn {
  background-color: rgba(255, 255, 255, 0.2);
}

.register-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}


/* CSS代码片段 - 可直接使用 */
.dropdown-menu {
  position: absolute;
  width: 100%;
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 15px 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(8px);
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 15px 25px;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dropdown-item:hover {
  background: #e0f2f1;
  color: #00695c;
  transform: translateX(5px);
}

.dropdown-item:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background: #4db6ac;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.dropdown-item:hover:before {
  transform: translateX(0);
}
</style>
